<template>
  <div class="page-box flex-col">
    <div class="page-bg" />

    <div class="page-container flex-col">
      <scroll-view
        class="scroll-box"
        scroll-y="true"
        @scrolltolower="onScrollBottom"
      >
        <div class="group2 flex-col">
          <div class="search flex-col">
            <div class="group3 flex-row">
              <div class="mod2 flex-col">
                <div class="block1 flex-row">
                  <img
                    class="icon3"
                    referrerpolicy="no-referrer"
                    src="../../static/images/search.png"
                  />
                  <input
                    class="txt2"
                    v-model="queryParams.fileName"
                    type="text"
                    placeholder="输入资料名称"
                  />
                  <!-- <span class="txt2">输入产品名称、型号</span> -->
                </div>
              </div>
              <span class="word1" @click="reflash">搜索</span>
            </div>
          </div>
          <div class="box4 flex-row" @click="open">
            <span class="info2">{{ queryParams.typeName }}</span>
            <img
              class="icon4"
              referrerpolicy="no-referrer"
              src="../../static/images/sort.png"
            />
          </div>
          <div class="box5 flex-col">
            <div
              class="section1 flex-col"
              v-for="(item, index) in list"
              :key="index"
              @click="onDownload(item)"
            >
              <div class="mod3 flex-col">
                <div class="bd1 flex-row">
                  <span class="info3" v-html="item.fileName"></span>
                  <img
                    class="icon5"
                    referrerpolicy="no-referrer"
                    src="../../static/images/arrow-right.png"
                  />
                </div>
              </div>
            </div>

            <div v-if="loading" class="x-f" style="margin-top: 10px">
              <u-loading mode="circle"></u-loading>
              <div style="margin-left: 10px">加载中..</div>
            </div>
            <u-empty
              v-if="!loading && list.length <= 0"
              text="暂无数据"
              mode="list"
            ></u-empty>
          </div>
        </div>

        <u-picker
          v-model="show"
          mode="selector"
          :default-selector="[0]"
          :range="typeList"
          range-key="type"
          @confirm="onConfirm"
        ></u-picker>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import { getAttachmentList, getAttachmentTypeList } from "@/api";
import { isHttp } from "@/utils/tools";
export default {
  data() {
    return {
      typeList: [],
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        type: "",
        typeName: "全部资料",
        fileName: "",
        productId: 0,
      },
      isEnd: false,
      loading: false,
      show: false,
    };
  },
  created() {
    this.getAttachmentTypeList();
    this.getAttachmentList();
  },
  methods: {
    onDownload(item) {
      const url = isHttp(item.fileUrl)
        ? item.fileUrl
        : this.$host + item.fileUrl;
      window.open(url);
    },
    open() {
      this.show = true;
    },
    getAttachmentList() {
      this.loading = true;
      getAttachmentList({ ...this.queryParams }).then((res) => {
        console.log(res);
        this.loading = false;
        this.list = [...this.list, ...res.rows];
        this.isEnd = res.rows.length < this.queryParams.pageSize;
      });
    },
    getAttachmentTypeList() {
      getAttachmentTypeList({status:0}).then((res) => {
        this.typeList = [{ id: "", type: "全部资料" }, ...res.rows];
      });
    },
    reflash() {
      this.queryParams.pageNum = 1;
      this.list = [];
      this.getAttachmentList();
    },
    onScrollBottom() {
      if (this.isEnd) return;
      this.queryParams.pageNum++;
      this.getAttachmentList();
    },
    onConfirm(index) {
      this.queryParams.type = this.typeList[index].id;
      this.queryParams.typeName = this.typeList[index].type;
      this.reflash();
    },
  },
};
</script>

<style lang="scss" scoped>
uni-app {
  background: url("../../static/images/bg7.png") 100% no-repeat;
  background-size: cover;
}
uni-page {
  background: url("../../static/images/bg8.png") 100% no-repeat;
}

.group2 {
  z-index: auto;
  width: 750rpx;
  .search {
    z-index: 94;
    height: 88rpx;
    width: 750rpx;
    justify-content: center;
    align-items: center;
    .group3 {
      z-index: auto;
      width: 686rpx;
      height: 66rpx;
      justify-content: space-between;
      .mod2 {
        z-index: 96;
        height: 66rpx;
        border-radius: 33rpx;
        background-color: rgba(44, 44, 46, 1);
        width: 616rpx;
        justify-content: center;
        align-items: flex-start;
        padding-left: 22rpx;
        .block1 {
          z-index: auto;
          width: 100%;
          height: 40rpx;
          .icon3 {
            z-index: 97;
            width: 40rpx;
            height: 40rpx;
          }
          .txt2 {
            z-index: 104;
            height: 40rpx;
            display: block;
            overflow-wrap: break-word;
            color: rgba(208, 208, 208, 1);
            font-size: 28rpx;
            letter-spacing: 0.3039473593235016rpx;
            white-space: nowrap;
            line-height: 40rpx;
            text-align: left;
            flex: 1;
          }
        }
      }
      .word1 {
        z-index: 105;
        width: 57rpx;
        height: 40rpx;
        display: block;
        overflow-wrap: break-word;
        color: rgba(208, 208, 208, 1);
        font-size: 24rpx;
        letter-spacing: 0.3039473593235016rpx;
        white-space: nowrap;
        line-height: 40rpx;
        text-align: right;
        margin-top: 13rpx;
        margin-left: 14rpx;
      }
    }
  }
  .box4 {
    z-index: auto;
    // width: 154rpx;
    justify-content: flex-end;
    margin: 28rpx 22rpx 0;
    .info2 {
      z-index: 7;
      height: 40rpx;
      display: block;
      overflow-wrap: break-word;
      color: rgba(208, 208, 208, 1);
      font-size: 28rpx;
      letter-spacing: 0.3039473593235016rpx;
      white-space: nowrap;
      line-height: 40rpx;
      text-align: left;
    }
    .icon4 {
      z-index: 8;
      width: 40rpx;
      height: 40rpx;
    }
  }
  .box5 {
    z-index: auto;
    width: 750rpx;
    margin-top: 28rpx;
    .section1 {
      z-index: 47;
      // height: 112rpx;
      background-color: rgba(255, 255, 255, 0);
      margin: 0 22rpx;
      border-bottom: 1rpx solid #545454;
      align-items: center;
      .mod3 {
        z-index: auto;
        width: 696rpx;
        // height: 77rpx;
        .bd1 {
          z-index: auto;
          width: 696rpx;
          height: 112rpx;
          justify-content: space-between;
          align-items: center;
          .info3 {
            z-index: 50;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 42rpx;
            display: block;
            overflow-wrap: break-word;
            color: rgba(208, 208, 208, 1);
            font-size: 30rpx;
            letter-spacing: 0.3256578743457794rpx;
            white-space: nowrap;
            line-height: 42rpx;
            text-align: left;
          }
          .icon5 {
            z-index: 51;
            width: 32rpx;
            height: 32rpx;
            margin-top: 6rpx;
          }
        }
        .bd2 {
          z-index: 49;
          width: 686rpx;
          height: 1rpx;
          background-color: rgba(84, 84, 84, 1);
          align-self: flex-start;
          margin-top: 34rpx;
        }
      }
    }
  }
}
</style>
